iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

網頁排版個人學習筆記系列 第 5

HTML&CSS| 選單使用float呈現方式

  • 分享至 

  • xImage
  •  

前言

剛接觸float來設定ul li選單與使用margin或padding來增加選單按鈕區塊時,常東拼西湊的寫,冏
終於今日與它們熟悉感增加許多,寫篇文章統整一下XD


選單靠左

使用float:left;
選單靠左示意圖

  1. 搭配範例 與瀏覽器的"開發人員工具"看下方解說
  2. 用ul與li做出選單
  3. 讓3個 li靠左對齊呈併排→ float:left;
  4. 把li中的a連結變區塊元素display:block;,增加按鈕範圍至li大小
  5. 可再於於li a中使用margin或padding 把按鈕範圍調整到更適當的大小
  6. 最後於li(使用float)的父元素加入清除浮動clearfix即可。

選單靠右

選單靠右通常左邊會搭配logo
選單靠右示意圖

  1. 搭配範例 與瀏覽器的"開發人員工具"看下方解說
  2. 用ul與li做出選單
  3. ul先靠右→float:right;
  4. 再把ul內的 li靠左對齊呈併排 → float:left;
  5. 把li中的a連結變區塊元素display:block;,增加按鈕範圍至li大小
  6. 可再於於li a中使用margin或padding 把按鈕範圍調整到更適當的大小
  7. 最後於與選單靠左不同的是,此範例中ul與li皆用到浮動,所以兩個元素都需清除浮動做clearfix。

※備註: 如果有浮動未做清除的動作,會重疊。下下篇來說清除浮動的方法們XD


上一篇
HTML&CSS|版型與文字置中用法
下一篇
HTML&CSS|logo圖片取代文字技巧&選單中加入logo
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言